<template>
    <el-card class="news-card">
        <el-row class="card-header">
            <el-col :span="18" class="header-title">最新动态</el-col>
            <el-col :span="6" class="header-more" v-if="isMobile">
                <span @click="viewMore">查看更多</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <dv-scroll-board 
                    :config="config" 
                    :style="isMobile ? 'width:100%;height:180px;color: black;' : 'width:100%;height:220px;color: black;'" 
                />
            </el-col>
        </el-row>
    </el-card>
</template>
 
<script>
import { getExam } from "@/api/vadmin/exam/exam";
import { getTrain } from "@/api/vadmin/train/train";
import { isMobileViewport } from "@/utils/device";

export default {
    data() {
        return {
            config: {
                data: [],
                align: ['left', 'left', 'left'],
                oddRowBGC: 'transparent',
                evenRowBGC: 'transparent',
                color: 'red',
                rowNum: 4,
                columnWidth: [40,50],
            },
            queryParams: { page: 1, page_size: 10 },
            trainList: [],
            examList: [],
            isMobile: false
        }
    },
    mounted() {
        this.checkDeviceType();
        window.addEventListener('resize', this.checkDeviceType);
        this.getExamList();
        this.getTrainList();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.checkDeviceType);
    },
    methods: {
        /** 检查设备类型 */
        checkDeviceType() {
            this.isMobile = isMobileViewport();
            // 如果是移动端，调整配置
            if(this.isMobile) {
                this.config.rowNum = 3;
            } else {
                this.config.rowNum = 4;
            }
            this.config = { ...this.config }; // 确保更新
        },
 
        async getExamList() {
            this.loading = true;
            getExam(this.queryParams).then((response) => {
                response.results.forEach((list, index) => {
                    const itemClass = this.isMobile ? 'mobile-item' : 'pc-item';
                    this.config["data"].push([
                        `<span class="index-number">${index+1}</span>`,
                        `<span class="type-tag type-exam">${'培训'}</span>`,
                        `<span class="item-name ${itemClass}">${list["name"]}</span>`,
                        `<span class="${this.isMobile ? 'mobile-date' : 'colorGrass'}">${this.formatDate(list.create_time)}</span>`,
                    ]);
                });
                this.config = { ...this.config }; //必不可少，不可省略
            });
        },
        
        async getTrainList() {
            this.loading = true;
            getTrain(this.queryParams).then((response) => {
                response.results.forEach((list, index) => {
                    const itemClass = this.isMobile ? 'mobile-item' : 'pc-item';
                    this.config["data"].push([
                        `<span class="index-number">${this.config.data.length + 1}</span>`,
                        `<span class="type-tag type-train">${'考试'}</span>`,
                        `<span class="item-name ${itemClass}">${list["name"]}</span>`,
                        `<span class="${this.isMobile ? 'mobile-date' : 'colorGrass'}">${this.formatDate(list.create_time)}</span>`,
                    ]);
                });
                this.config = { ...this.config }; //必不可少，不可省略
            });
        },
        
        /** 格式化日期 */
        formatDate(dateStr) {
            const date = new Date(dateStr);
            const month = date.getMonth() + 1;
            const day = date.getDate();
            return `${month}-${day}`;
        },
        
        /** 查看更多 */
        viewMore() {
            // 跳转到更多动态页面
            this.$message.info('查看更多动态');
        }
    }
}
</script>

<style lang="scss" scoped>
.news-card {
    height: 100%;
}

.card-header {
    margin-bottom: 20px;
}

.header-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.header-more {
    text-align: right;
    
    span {
        color: #999;
        font-size: 14px;
        cursor: pointer;
        
        &:hover {
            color: #1890ff;
        }
    }
}

:deep(.index-number) {
    font-weight: bold;
    color: #999;
}

:deep(.type-tag) {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: white;
    
    &.type-exam {
        background-color: #1890ff;
    }
    
    &.type-train {
        background-color: #52c41a;
    }
}

:deep(.item-name) {
    font-weight: 500;
}

:deep(.mobile-date) {
    font-size: 12px;
    color: #999;
}

@media screen and (max-width: 768px) {
    .header-title {
        font-size: 15px;
    }
    
    .header-more {
        span {
            font-size: 12px;
        }
    }
    
    :deep(.mobile-item) {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 150px;
    }
    
    :deep(.type-tag) {
        padding: 1px 4px;
        font-size: 10px;
    }
}
</style>

